﻿@{
    ViewBag.Title = "Grid Event -- RowBind";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section css{

}
@section scripts{
    <script src="~/Content/grid/src/noke.grid.js"></script>
    <script>
        $(function () {
            BindProcessData();
        });

        function ProcessGridSetting() {

            var setting = { id: "#ProcessGrid", key: "ID", title: {}, cols: [], toolbar: {}, rowindex: false, data: [], rowbind: null };
            setting.cols.push({ key: "ID", type: "string", width: 50, label: "ID" });
            setting.cols.push({ key: "ProcessName", type: "string", width: 80, label: "ProcessName" });
            setting.cols.push({ key: "Summary", type: "string", width: 80, label: "Summary" });
            setting.cols.push({ key: "Time", type: "string", width: 80, label: "Time" });
            setting.cols.push({ key: "Operator", type: "string", width: 60, label: "Operator" });
            setting.cols.push({ key: "operate-delete", type: "string", width: 60, label: "" });

            setting.rowbind = function (i, model) {
                
                model['operate-delete'] = '<a href="#" class="operate-delete" bind-id="' + model.ID + '"><span class="label label-danger">Delete</span></a>&nbsp;<a href="#" class="operate-modify" bind-id="' + model.ID + '"><span class="label label-primary">Modify</span></a>';
                model.ID = '<a href="#">'+model.ID + '</a>';
                model.Summary = model.Summary + i;             
            };

            $(setting.id).click(function (e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.nodeName.toString() == "A") {
                    if ($(target).attr('class') == 'operate-delete') {
                        var id = $(target).attr('bind-id');
                        return confirm('确认删除此项? id = ' + id);
                    }
                    if ($(target).attr('class') == 'operate-modify') {
                        var id = $(target).attr('bind-id');
                        alert('编辑此项! id = ' + id);
                        return true;
                    }
                }
            });
            return setting;
        }

        function BindProcessData() {
            var processList = [];
            processList.push({ ID: 112, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 345, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 114, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 234, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 5648, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 986, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            var setting = ProcessGridSetting();
            setting.data = processList;
            $('#ProcessGrid').grid(setting);
        }
    </script>

}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">UI&控件</a>
                </li>
                <li class="active">
                    <strong>Grid Event -- RowBind</strong>
                </li>
            </ol>
        </div>

}

<div class="row">    
    <div class="col-lg-12">
        <div id="ProcessGrid"></div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row"> 
    <div class="col-lg-3">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-html" data-lang="html">
<kbd>//********* html **********//

&lt;script src="~/Content/grid/src/noke.grid.js"&gt;
    &lt;/script&gt;
                          
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"ProcessGrid"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></kbd> 
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-3 -->
    <div class="col-lg-9">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-js" data-lang="js">
<kbd>//********* javascript **********//</kbd>

<kbd>function $start() {
    BindProcessData();
}

function ProcessGridSetting() {

    var setting = { id: "#ProcessGrid", key: "ID", title: {}, cols: [], toolbar: {}, rowindex: false, data: [], rowbind: null };
    setting.cols.push({ key: "ID", type: "string", width: 50, label: "ID" });
    setting.cols.push({ key: "ProcessName", type: "string", width: 80, label: "ProcessName" });
    setting.cols.push({ key: "Summary", type: "string", width: 80, label: "Summary" });
    setting.cols.push({ key: "Time", type: "string", width: 80, label: "Time" });
    setting.cols.push({ key: "Operator", type: "string", width: 60, label: "Operator" });
    setting.cols.push({ key: "operate-delete", type: "string", width: 60, label: "" });

    setting.rowbind = function (i, model) {
                
        model['operate-delete'] = '<a href="#" class="operate-delete" bind-id="' + model.ID + '"><span class="label label-danger">Delete</span></a>&nbsp;<a href="#" class="operate-modify" bind-id="' + model.ID + '"><span class="label label-primary">Modify</span></a>';
        model.ID = '<a href="#">'+model.ID + '</a>';
        model.Summary = model.Summary + i;             
    };

    $(setting.id).click(function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.nodeName.toString() == "A") {
            if ($(target).attr('class') == 'operate-delete') {
                var id = $(target).attr('bind-id');
                return confirm('确认删除此项? id = ' + id);
            }
            if ($(target).attr('class') == 'operate-modify') {
                var id = $(target).attr('bind-id');
                alert('编辑此项! id = ' + id);
                return true;
            }
        }
    });
    return setting;
}

function BindProcessData() {
    var processList = [];
    processList.push({ ID: 112, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 345, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 114, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 234, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 5648, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 986, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    var setting = ProcessGridSetting();
    setting.data = processList;
    $('#ProcessGrid').grid(setting);
}</kbd>        
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-9 -->

</div>
<!-- /.row -->